<html>
  <head>
    <title></title>
	<script source src="i18n.js"> </script>
    <script type="text/javascript">
      
	  /* Used to set the options meune in a way that supports i18n. */
	function AddReliableOptions() {
		select = document.getElementById("reliable");
		opt1 = new Option(chrome.i18n.getMessage("reliable"), "true");
		opt2 = new Option(chrome.i18n.getMessage("aggressive"), "false");
		select.add(opt1, null);
		select.add(opt2, null);
	  }
      /* Populates the select boxes with a list of languages, and calls
         restoreOptions(). */
      function onLoad() {
        document.title= chrome.i18n.getMessage("OptionsTitle");
	   /* i18n functions linking to the message catalog */
		i18nReplace("TranslationOptions");
		i18nReplace("TransQuility");
		i18nReplace("PrimaryLang");
		i18nReplace("SecondLang");
		i18nReplaceImpl('savebutton', 'savebutton', 'value');
	   /* Enf of i18n functions linking to the message catalog */
		AddReliableOptions();
		chrome.extension.sendRequest({action: "languages"}, function(response) {
            var primarySelect = document.getElementById('primary_language');
            var secondarySelect = document.getElementById(
              'secondary_languages');
            for (var language in response.languages) {
              var option = document.createElement('option');
              option.text = language;
              option.value = language;
              primarySelect.appendChild(option);

              option = document.createElement('option');
              option.text = language;
              option.value = language;
              secondarySelect.appendChild(option);
            }
          restoreOptions();
          });
      }

     function restoreOptions() {
       var primaryLanguage = localStorage['primary_language'];
       var secondaryLanguages = localStorage['secondary_languages'];
       if (!primaryLanguage || !secondaryLanguages) {
         return;
       }

       secondaryLanguages = JSON.parse(secondaryLanguages);

       var select = document.getElementById('primary_language');
       for (var i = 0; i < select.children.length; i++) {
         var child = select.children[i];
         if (child.value == primaryLanguage) {
           child.selected = 'true';
           break;
         }
       }
       select = document.getElementById('secondary_languages');
       for (var i = 0; i < select.children.length; i++) {
         var child = select.children[i];
         for (var j = 0; j < secondaryLanguages.length; j++) {
           if (child.value == secondaryLanguages[j]) {
             child.selected = 'true';
             break;
           }
         }
       }

       select = document.getElementById('reliable');
       for (var i = 0; i < select.children.length; i++) {
         var child = select.children[i];
         if (child.value == localStorage['reliable']) {
           child.selected = 'true';
           break;
         }
       }
     }

     function saveOptions() {
       var select = document.getElementById('primary_language');
       var language = select.children[select.selectedIndex].value;
       localStorage['primary_language'] = language;

       var secondaryLanguages = [];
       select = document.getElementById('secondary_languages');
       for (var i = 0; i < select.children.length; i++) {
         var child = select.children[i];
         if (child.selected == true) {
           secondaryLanguages.push(child.value);
         }
       }

       localStorage['secondary_languages'] = JSON.stringify(secondaryLanguages);

       select = document.getElementById('reliable');
       var option = select.children[select.selectedIndex];
       localStorage['reliable'] = option.value;

       var status = document.getElementById('status');
       status.innerHTML = 'Saved.';
       setTimeout(function() {
           status.innerHTML = '';
       }, 750);
     }

    </script>
  </head>

  <body onload="onLoad()">

    <h2 id="TranslationOptions"></h2>
	

    <div>
      <div class="name" id="TransQuility">
      </div>
      <div class="option">
        <select id="reliable">
        </select>
      </div> 
    <div>
      <div class="name" id="PrimaryLang">
      </div>
      <div class="option">
        <select id="primary_language">
        </select>
      </div>
    </div>

    <div>
      <div id="SecondLang">
      </div>
      <div>
        <select id="secondary_languages" MULTIPLE size="10">
        </select>
      </div>
    </div>

    <div>
		<input type="button" onclick="saveOptions()" id="savebutton"></input>    
	</div>
    <div id="status"></div>
  </body>
</html>
